<template>
  <MyDialog
    :title="initParams.title"
    show-cancel
    :visible="showDialog"
    :ok-loading="btnLoading"
    width="700px"
    @close="close"
    @ok="handleConfirmClick"
  >
    <el-form
      ref="baseForm"
      v-loading="loading"
      :model="modalFormData"
      label-suffix=":"
      label-width="100px"
      :rules="modalRules"
    >
      <el-form-item label="操作系统" prop="ops">
        <el-input v-model="modalFormData.ops" placeholder="请输入操作系统" />
      </el-form-item>
      <el-form-item label="渠道名称" prop="channelId">
        <el-select
          v-model="modalFormData.channelId"
          style="width: 100%"
          placeholder="请选择设备类型"
          clearable
        >
          <el-option
            v-for="item in channelList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="镜像名称" prop="imageName">
        <el-input v-model="modalFormData.imageName" placeholder="请输入镜像名称" />
      </el-form-item>
      <el-form-item label="镜像链接" prop="imageUrl">
        <el-input v-model="modalFormData.imageUrl" placeholder="请输入镜像下载链接" />
      </el-form-item>
      <el-form-item label="附件名称" prop="attachmentName">
        <el-input v-model="modalFormData.attachmentName" placeholder="请输入附件名称" />
      </el-form-item>
      <el-form-item label="附件链接" prop="attachmentUrl">
        <el-input v-model="modalFormData.attachmentUrl" placeholder="请输入附件下载链接" />
      </el-form-item>
      
      <el-form-item label="镜像说明" prop="remark">
        <el-input
          v-model="modalFormData.remark"
          type="textarea"
          placeholder="请输入镜像说明"
          :autosize="{ minRows: 2, maxRows: 6 }"
        />
      </el-form-item>
    </el-form>
  </MyDialog>
</template>

<script>
import dialogMixin from "@/mixins/dialogMixin";

export default {
  components: {
  },
  mixins: [dialogMixin],
  props: {
    initParams: {
      type: Object,
      default: () => ({}),
    },
    btnLoading: {
      type: Boolean,
      default: false,
    },
    channelList:{
      type: Array,
      default: () => ({}),
    }
  },
  data() {
    return {
      loading: false,
      modalFormData: {
        ops:'',
        imageName:'',
        imageUrl:'',
        attachmentName:'',
        attachmentUrl:'',
        remark:'',
        channelId:'',
      }, // 模态框表单数据
      modalRules: {
        ops: [
          { required: true, message: "请输入操作系统", trigger: "blur" },
        ],
        channelId: [
          { required: true, message: "请选择渠道名称", trigger: "blur" },
        ],
        imageName: [
          { required: true, message: "请输入镜像名称", trigger: "blur" },
        ],
        imageUrl: [
          { required: true, message: "请输入镜像下载链接", trigger: "blur" },
        ],
      }, 
    };
  },
  watch: {
    "initParams.row": {
      handler(row) {
        if (row) {
          this.modalFormData = {
            ...row,
          };
        }
      },
      immediate: true,
    },
  },
  methods: {
    handleConfirmClick() {
      this.$refs.baseForm.validate((valid) => {
        if (!valid) return;
        this.initParams.cb(this.modalFormData);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.input-number {
  ::v-deep .el-form-item__label {
    width: 180px !important;
  }
}
.icon {
  margin: 6px 0 0 20px;
  font-size: 26px;
  color: #999;
  cursor: pointer;
}
</style>
